<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery.form</title>
<link rel="stylesheet" type="text/css" href="../themes/default/tooltip.css" />
<link rel="stylesheet" type="text/css" href="../themes/default/combobox.css" />
<link rel="stylesheet" type="text/css" href="../themes/default/validatebox.css" />
<script type="text/javascript" src="../jquery-1.10.2.js">
</script>
<script type="text/javascript" src="../jquery.ba-serializeobject.js">
</script>
<script type="text/javascript" src="../src/jquery.parser.js">
</script>
<script type="text/javascript" src="../src/jquery.tooltip.js">
</script>
<script type="text/javascript" src="../src/jquery.validatebox.js">
</script>
<script type="text/javascript" src="../src/jquery.combobox.js">
</script>
<script type="text/javascript" src="../src/jquery.form.js">
</script>

<style></style>
</head>
<body>

	
<input type="button" value="序列化" onclick="onSerialize()">
<input type="button" value="加载数据" onclick="onLoad()">
<input type="button" value="清空" onclick="onClear()">
<form id="ff"> 
  <input type="text" name="text">
  <label for="number">Number:</label>
  <input type="number" name="number" id="number"><input type="date" name="date">

<label for="textarea">Text Area:</label>
<textarea name="textarea" id="textarea"></textarea>
<label for="time">Time:</label>
<input type="time" name="time" id="time">
<input type="hidden" name="hiddenField" id="hiddenField">
<input type="radio" name="radio" value="radio" id="radio" >
<label for="radio">Radio Button </label>
<input type="checkbox" name="checkbox" value="checkbox" id="checkbox">
<label for="checkbox">Checkbox </label>
<p>
  <label>
    <input type="radio" name="RadioGroup1" value="单选1"  id="RadioGroup1_0">
    单选</label>
  <br>
  <label>
    <input type="radio" name="RadioGroup1" value="单选2" id="RadioGroup1_1">
    单选</label>
  <br>
</p>
<p>
  <label>
    <input type="checkbox" name="CheckboxGroup1" value="复选框1" id="CheckboxGroup1_0">
    复选框</label>
  <br>
  <label>
    <input type="checkbox" name="CheckboxGroup1" value="复选框2" id="CheckboxGroup1_1">
    复选框</label>
  <br>
</p>
<input type="text" name="value" class="xui-combobox" data-options="initDom:true">
</form>
<script>
	var data = {};
	$(function() {
		$('.combobox, .xui-combobox').combobox({
			 panelHeight:100,
			 //multiple:true,
			//disabled:true,
			novalidate: true,
			required: true,
			data:[
				{text:'1',value:'1'},
				{text:'2',value:'2'},
				{text:'3',value:'3'},
				{text:'4',value:'4'},
				{text:'5',value:'5'},
				{text:'6',value:'6'},
				{text:'7',value:'7'},
				{text:'8',value:'8'},
				{text:'9',value:'9'},
				{text:'11',value:'11'},
				{text:'12',value:'12'},
				{text:'13',value:'13'},
				{text:'14',value:'14'},
				{text:'15',value:'15'},
				{text:'16',value:'16'},
				{text:'17',value:'17'},
				{text:'18',value:'18'},
				{text:'19',value:'19'}
			]
		});
	});
	function onSerialize() {
		data = $('#ff').serializeObject();
		console.log(data);
	}
	
	function onClear() {
		$('#ff').form('clear');
	}
	
	function onLoad() {
		$('#ff').form('load', data);
	}
</script>
</body>
</html>